<template>
  <view class="approval-list">
    <view class="approval-item" v-for="(item,index) in DataList" :key="item.id">
       <!-- 申请类型与编号 -->
      <view class="item-header">
        <view class="type-box">
          <text class="type-text">{{getTypeName(item.type)}}</text>
        </view>
        <text :class="['status',getPendStatus(item.approvalStatus).className]">{{getPendStatus(item.approvalStatus).text}}</text>
      </view>
      <!-- 申请信息 -->
      <view class="item-info">
        <view class="info-row">
          <text class="label">申请人:</text>
          <text class="value">[{{ item.deptName }}]- {{ item.employeeName}}</text>
        </view>
        <view class="info-row">
          <!-- formatTime(item.applyTime) -->
          <text class="label">申请时间:</text>
          <text class="value">{{item.applyTime}}</text>
        </view>
        <view class="info-row" v-if="item.approvalStatus ===2">
          <text class="label" style="color: #fd4569;">销假状态:</text>
          <text class="value" style="color: #fd4569;">{{JudgePendingStatus(item.revokeStatus)}}</text>
        </view>
        <view class="info-row">
          <text class="label" style="color: #2a8674;">延假状态:</text>
          <text class="value" style="color: #2a8674;">{{JudgePendingStatus2(item.extensionStatus)}}</text>
        </view>
      </view>
      <view class="item-actions">
        <view class="action-btn edit" v-if="isDetailShow" @tap="viewEdit(item)"><uni-icons type="compose"></uni-icons>进行审批</view>
        <view class="action-btn detail" @tap="viewDetail(item)"><uni-icons type="eye-filled"></uni-icons>查看详情</view>
      </view>
      <view class="item-end">
        <view class="type-box">
          <text class="number">#{{item.id}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {exposeFormatTime} from '@/utils/format.js'
  export default {
    name:"approval-list",
    data() {
      return {
        
      };
    },
    props: {
      DataList: {
        type: Array,
        required: true
      },
      isDetailShow: {
        type: Boolean,
        default: true
      }
    },
    methods: {
      getTypeName(type) {
        switch(type) {
          case 1:
            return '请假审批';
          case 2: 
            return '出差审批';
          case 3: 
            return '培训审批';
        }
      },
      formatTime(dataStr){
        return exposeFormatTime(dataStr)
      },
      JudgePendingStatus(dataStr) {
        switch(dataStr) {
          case 0:
            return '未销假'
          case 1:
            return '申请销假中'
          case 2:
            return '销假完成'
          case 3: 
            return '销假超时'
        }
      },
      JudgePendingStatus2(dataStr){
        switch(dataStr) {
          case 0:
            return '未延期'
          case 1:
            return '申请延期'
          case 2:
            return '已延期'
          case 3:
            return  '驳回延期'
        }
      },
      getPendStatus(status) {
        switch(status) {
          case 1: 
             return { text: '审批中', className: 'status-pending' };
          case 2:
             return { text: '审批批准', className: 'status-pending' };
          default: 
             return { text: '未审批', className: 'status-not-approved' };
        }
      },
      viewEdit(item) {
        this.$emit('view-edit',item)
      },
      viewDetail(item) {
        this.$emit('view-detail', item);
        console.log(item)
      },
    }
  }
</script>

<style lang="scss" scoped>
  .approval-list {
    min-height: 100vh;
    margin-top: 30rpx;
    .approval-item {
      background-color: #fff;
      border-radius: 10rpx;
      padding: 20rpx 20rpx 20rpx 30rpx;
      margin: 20rpx 20rpx;
      position: relative; 
      // 添加左侧颜色条
      &::before {
        content: '';
        position: absolute;
        left: 0rpx; // 向右偏移，确保在内部
        top: 50%; // 垂直居中
        transform: translateY(-50%); // 垂直居中调整
        width: 10rpx; // 蓝条宽度
        height: 100%; // 高度设为80%，不会太长
        background-color: #2b7ff3; // 蓝色竖条
        border-radius: 10rpx; // 圆角
      }
      .item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10rpx;
        
        .type-box {
          display: flex;
          .type-text {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
          }
        }
        .status {
          font-size: 28rpx;
          padding: 5rpx 12rpx;
          border-radius: 4rpx;
          margin-right: -20rpx;
          margin-top: -41rpx;
        }
        .status-pending {
          color: #2b7ff3;
          background-color: rgba(43, 127, 243,0.1);
        }
        .status-not-approved {
          color: #00b578;
          background-color: rgba(0, 181, 120,0.1);
        }      
      }
      .item-info {
        margin-bottom: 20rpx;
        .info-row {
          padding: 5rpx;
          margin-left: 10rpx;
          .label {
            color: #999;
            margin-right: 30rpx;
            font-size: 25rpx;
          }
          .value {
            color: #333;
            font-size: 25rpx;
            font-weight: bold;
          }
        }
      }
      .item-actions {
        display: flex;
        justify-content: flex-end;
        margin-top: 20rpx;
        
        .action-btn {
          margin-left: 20rpx;
          font-size: 24rpx;
          border-radius: 4rpx;
          display: flex;
          padding: 5rpx 10rpx;
          
          &.edit {
            background: rgba(242, 242, 242,1);
          }
          &.detail {
            background: rgba(242, 242, 242,1);
          }
        }
      }
      .item-end {
        margin-bottom: rpx;
        display: flex;
        justify-content:end;
        align-items: center;
        
        .number {
          font-size: 40rpx;
          padding: 2rpx 10rpx;
          color: #999;
        }
      }
    }
  }
</style>